<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- <form action="/login"> -->
    <p>
      <label for="account">account:</label>
      <input type="text" name="account" value="waitfish">
    </p>
    <p>
      <label for="password">password:</label>
      <input type="password" name="password" value="123456">
    </p>
    <p>
      <!-- 验证码 -->
      <label for="captcha">captcha:</label>
      <input type="text" name="captcha">
      <img src="/captcha" alt="captcha">
    </p>
    <p>
      button: <input id="submit" type="submit" value="login">
    </p>
    <p>
      info: <span id="info"></span>
    </p>
  <!-- </form> -->

  <script src="/assets/js/jquery-3.5.1.min.js"></script>
  <script>
    $(function() {
      // json 格式提交
      $('#submit').click(function() {
        $.ajax({
          url: '/login',
          type: 'POST',
          contentType: 'application/json',
          data: JSON.stringify({
            account: $('input[name="account"]').val(),
            password: $('input[name="password"]').val(),
            captcha: $('input[name="captcha"]').val()
          }),
          success: function(data) {
            info.innerHTML = data.msg; 
          },
          error: function() {
            alert('网络错误，请稍后再试');
          }
        });
        return false;
      });
    });
  </script>
</body>
</html>